<template>
  <div class="list">
    文章列表
    <!-- 1.0面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 2.0卡片 -->
    <el-card class="box-card">
      <el-table :data="newLisw" style="width: 100%">
        <!-- id -->
        <el-table-column label="id" width="50">
          <template slot-scope="scope">
            <!-- {{ scope.$index }} -->
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <!-- 日期 -->
        <!-- <el-table-column label="日期" width="200">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{
              scope.row.create_date | formatDate
            }}</span>
          </template>
        </el-table-column> -->
        <!-- 文章类型 -->
        <el-table-column label="类型" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 1">
              <i class="el-icon-tickets"></i>
              <span>文章</span>
            </span>
            <span v-else>
                <i class="el-icon-video-camera"></i>
              <span>视频</span>
            </span>
          </template>
        </el-table-column>
        <!-- 图片 -->
        <el-table-column label="封面" width="180">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.cover.length"
              style="width: 100px; height: 100px"
              :src="scope.row.cover[0].url | imgUrl"
            ></el-image>
          </template>
        </el-table-column>
        <!-- 标题 -->
        <el-table-column label="标题" width="180">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <!-- 作者 -->
        <el-table-column label="作者" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.user.nickname }}</p>
              <p>住址: {{ scope.row.address }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.user.nickname }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="$router.push(`/home/post_publish/${scope.row.id}`)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 
          @size-change      页容量改变时触发
          @current-change   页码改变时触发
          :current-page     当前页码
          :page-sizes       页容量数组(用于选择)
          :page-size        页容量
          :total            总条目数
          layout            组件布局，需要哪些功能
        -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageindex"
        :page-sizes="[4, 6, 8, 10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 3.0表格 -->
    <!-- 4.0分页 -->
  </div>
</template>

<script>
import { getPostAPI} from "@/apis/news.js";
export default {
  async created() {
    const res = await getPostAPI({ pageSize: 1000 });
    console.log(res);
    this.newLisw = res.data.data;
    this.total = res.data.data.length;
    this.getPost();
  
  },
  data() {
    return {
      newLisw: [],
      pageindex: 1,
      pagesize: 4,
      total: 0,
    };
  },
  methods: {
    async getPost() {
      const res2 = await getPostAPI({
        pageSize: this.pagesize,
        pageIndex: this.pageindex,
      });
      this.newLisw = res2.data.data;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      console.log("页容量改变", val);
      this.pagesize = val;
      this.getPost();
    },
    handleCurrentChange(val) {
      console.log("页码改变", val);
      this.pageindex = val;
      this.getPost();
    },
  },
};
</script>
<style lang="less" scoped>
.box-card {
  margin-top: 20px;
}
</style>
